<!DOCTYPE html>
<html>
<head>
    <title>旋轉簽名框</title>
    <style>

        .signature-container1 {
            /* 為了演示效果，添加一些邊距 */
            margin-top: 150px;
            margin-left: 150px;
            /* 應用旋轉效果 */

            /* 為了讓旋轉中心更直觀，可以設置transform-origin */
            transform-origin: left top;
            /* 容器大小自適應內容 */
            display: inline-block;
        }

        /* 用於旋轉的外部容器 */
        .signature-container {
            /* 為了演示效果，添加一些邊距 */
            margin-top: 150px;
            margin-left: 150px;
            /* 應用旋轉效果 */
            transform: rotate(90deg);
            /* 為了讓旋轉中心更直觀，可以設置transform-origin */
            transform-origin: left top;
            /* 容器大小自適應內容 */
            display: inline-block;
        }

        /* 簽名框的樣式 */
        .signature-box {
            width: 200px; /* 長方形的寬度 */
            height: 100px; /* 長方形的高度 */
            border: 2px solid black; /* 邊框樣式 */
        }

        /* “請簽字”文字的樣式 */
        .signature-text {
            text-align: center; /* 文字居中 */
            margin-top: 10px; /* 與上方盒子的間距 */
        }
    </style>
</head>
<body>

<div class="signature-container1">
    <div class="signature-box"></div>
    <div class="signature-text">11111111111111</div>
</div>


<div class="signature-container">
    <div class="signature-box"></div>
    <div class="signature-text">11111111111111</div>
</div>

</body>
</html>
